// Write new TreeNode class based on AnimationItem class
hal.Create.Class(null, "exp.AnimationItem", null, "exp.TreeNode", {
    __defaults__: { imgPath: "images/theme0/", zoomRate: 1, fontSize: 12 },
    init: function(container, props) {
        for (var x in props)
            this[x] = props[x];
        exp.AnimationItem.prototype.init.apply(this, [container, props]);
        this.canvas.style.cursor = "pointer";
        this.setNodeEvents();
    },
    setProp: function(p, value) {
        this[p] = value; //des[p];
        switch (p) {
            case "radius":
                this.canvas.style.width = this.canvas.style.height = Math.floor(2 * this.radius) + "px";
                break;
            case "left":
            case "top":
                var delta = (!isEmpty(this.radius)) ? this.radius : 0; //(!isEmpty(des.radius)) ? des.radius:0;
                this.canvas.style[p] = Math.floor(this[p] - delta) + "px";
                break;

            case "iconType":
                this.setIcon(this.iconType);
                break;

            case "text":
            case "labelAngle":
                this.setLabel(this.text, this.labelAngle);
                break;
            case "fontSize":
                if (this.label)
                    this.label.style.fontSize = this.fontSize + "px";
                break;
            default:
                exp.AnimationItem.prototype.setProp.apply(this, [p, value]);
                break;
        }
    },
    show: function(flag) {
        this.canvas.style.visibility = (flag == false) ? "hidden" : "visible";
        this.icon.style.visibility = (flag == false) ? "hidden" : "visible";
    },
    drawIcon: function(iconType) {
        this.icon = document.createElement("img");
        this.icon.id = this.id + "_ICON";
        this.icon.style.cssText += ";z-index:1;position:absolute;top:0px;left:0px;width:100%;height:100%;";

        this.icon2 = document.createElement("img");
        this.icon2.id = this.id + "_ICON2";
        this.icon2.style.cssText += ";z-index:2;position:absolute;top:0px;left:0px;margin:10%;width:80%;height:80%;";

        //DragManager.setDragTarget(this.canvas, this.canvas.parentNode);

        this.canvas.appendChild(this.icon);
        this.canvas.appendChild(this.icon2);

        this.setIcon(iconType);
    },
    setIcon: function(iconType) { // folder / home / cart/ file
        if (!this.icon) {
            this.drawIcon(iconType);
            return;
        }
        ic = iconType.split("_"); // ImgName_ImgSize_ImgStatus
        if (isEmpty(ic[1])) ic[1] = "M";
        if (isEmpty(ic[2])) ic[2] = "iatv";
        this.iconType = ic.join("_");

        if (isEmpty(exp.TreeNode.iconSize[ic[0]]))
            exp.TreeNode.iconSize[ic[0]] = exp.TreeNode.iconSize["home"];
        var r = exp.TreeNode.iconSize[ic[0]][ic[1]];

        if (isEmpty(ic[3])) { // Selection status is not given
            this.setProp("radius", r * this.zoomRate); // Save icon size to calculate others
            this.icon.src = hal.ImageList.getItem(this.imgPath + ic[0] + "_" + ic[1] + "_" + ic[2] + ".gif").src;
            this.icon2.src = hal.ImageList.getItem(this.imgPath + ic[0] + "_" + ic[1] + "_" + ic[2] + ".gif").src; //this.icon.src + "";
            this.icon2.style.visibility = "hidden";
        }
        else { // Selection status is given            
            if (ic[3] == "selected" || ic[3] == "passed") {
                this.setProps({ radius: exp.TreeNode.iconSize["circle"][ic[1]] * this.zoomRate, left: this.left, top: this.top });
                this.setLabel();
                hal.ImageList.setImage(this.icon, this.imgPath + "circle_" + ic[1] + "_" + ic[2] + ".gif");
                hal.ImageList.setImage(this.icon2, this.imgPath + ic[0] + "_" + ic[1] + "_" + ic[2] + ".gif");
                this.icon2.style.visibility = "visible";
            }
            else {
                this.icon.src = hal.ImageList.getItem(this.imgPath + ic[0] + "_" + ic[1] + "_iatv.gif").src;
                this.icon2.style.visibility = "hidden";
                this.setProps({ radius: exp.TreeNode.iconSize[ic[0]][ic[1]] * this.zoomRate, left: this.left, top: this.top });
                this.setLabel();
            }
        }
    },
    drawLabel: function(text, labelAngle) {
        this.label = document.createElement("div");
        this.label.style.cssText += ";position:absolute;font-size:14px;z-index:3;white-space:nowrap;overflow: hidden;display:block;text-overflow: ellipsis;";

        this.canvas.appendChild(this.label);
        this.label.innerHTML = text || "";
    },
    _getLabelPos: function(deg) {
        var dx = 1.2 * this.radius * Math.cos(deg * Math.PI / 180), dy = -1.2 * this.radius * Math.sin((deg) * Math.PI / 180);
        return { x: this.radius + dx, y: this.radius + dy };
    },
    setLabel: function(text, labelAngle) {
        if (!this.label)
            this.drawLabel(text, labelAngle);
        if (this.label.visibility == "hidden")
            return;

        if (!isEmpty(labelAngle)) this.labelAngle = labelAngle;
        if (isEmpty(this.labelAngle)) this.labelAngle = 0;
        if (!isEmpty(text)) this.text = text;
        if (isEmpty(this.text)) this.text = "";

        // Determine position
        var cl = null, ct, cr = null, ch = (this.radius * 2);
        var lpos = this._getLabelPos(this.labelAngle);

        if ((this.labelAngle < 90 || this.labelAngle > 270) && this.labelAngle != 360) {
            cl = lpos.x; ct = Math.floor(lpos.y - ch / 2);
        }
        else if (this.labelAngle == 90 || this.labelAngle == 270) {
            cl = lpos.x - this.radius;
            if (!hal.system.html.ie) // For demo only
                cl -= this.radius / 2;
            ct = (this.labelAngle == 90) ? Math.floor(lpos.y - ch / 2) : Math.floor(lpos.y - ch / 4);
        }
        else if (this.labelAngle != 360) {
            cr = -lpos.x + 2 * this.radius;
            ct = Math.floor(lpos.y - ch / 2);
        }
        else { // Text at central
            ct = 0; cl = 0;
        }

        var d = exp.TreeNode.iconSize["circle"][ic[1]] - exp.TreeNode.iconSize[ic[0]][ic[1]];

        if (!isEmpty(cl)) {
            if (cl < 0) cl = 0;
            if (this.iconType.indexOf("selected") >= 0)
                cl += d;

            this.label.style.cssText += ";text-align:left;height:" + ch + "px;line-height:" + ch + "px;left:" + cl + "px;top:" + ct + "px;right:auto;";
            if (this.labelAngle == 360) {// Text at central
                this.label.style.width = "100%";
                this.label.style.textAlign = "center";
            }
            else
                this.label.style.width = 3 * this.radius + "px";
        }
        else {
            this.label.style.width = 3 * this.radius + "px";
            this.label.style.cssText += ";text-align:right;height:" + ch + "px;line-height:" + ch + "px;right:" + cr + "px;top:" + ct + "px;left:auto;";
        }

        // Final setting for design
        //if (this.labelAngle == 90) this.label.style.whiteSpace = "nowrap";
        //else { this.label.style.whiteSpace = ""; this.label.style.lineHeight = ""; /* this.label.style.wordWrap = "break-word";*/ }

        this.label.innerHTML = this.text;
        this.label.title = this.text;
        this.icon.title = this.text;
    },

    setNodeEvents: function() {
        var self = this;
        var evList = { mouseover: "MouseOver", mouseout: "MouseOut", click: "Click" };
        for (var p in evList) {
            eval("hal.env.addEvent(self.icon,'" + p + "', self." + p + ")");
            eval("hal.env.addEvent(self.icon2,'" + p + "', self." + p + ")");
            //eval("hal.env.addEvent(self.label,'" + p + "', self." + p + ")");

            eval("hal.env.removeEvent(self.canvas,'" + p + "', self." + p + ")");
        }
    },
    onAnimation: function() { this.setLabel(); },
    onAnimStart: function() { this.show(true); },

    onMouseOver: function(ev) {
        ev = $ev(ev);
        var pos = hal.x.getPos(this.canvas);
        var dx = ev.page.x - pos.left - this.radius, dy = ev.page.y - pos.top - this.radius;

        hal.ImageList.setImage(this.icon, this.icon.src.replace(/_iatv./g, "_atv."));
        if (this.icon2.style.visibility != "hidden")
            hal.ImageList.setImage(this.icon2, this.icon2.src.replace(/_iatv./g, "_atv."));
    },
    onMouseOut: function() {
        hal.ImageList.setImage(this.icon, this.icon.src.replace(/_atv./g, "_iatv."));
        if (this.icon2.style.visibility != "hidden")
            hal.ImageList.setImage(this.icon2, this.icon2.src.replace(/_atv./g, "_iatv."));
    }
});

//Sizes of node
(function() {
    exp.TreeNode.iconSize = {
        "home": { "S": 12, "M": 25, "L": 30 },
        "circle": { "S": null, "M": 30, "L": 40 }
    };
    
    var sz = exp.TreeNode.iconSize;
    for (var sp in sz)
        for (var k in sz[sp]) {
        var src = "images/theme0/" + sp + "_" + k;
        hal.ImageList.append(src + "_atv.gif", src + "_atv.gif");
        hal.ImageList.append(src + "_iatv.gif", src + "_iatv.gif");
    }
})();